*{
    padding: 0;
    margin: 0;
}
body{
    height: 100vh;
    background-image: linear-gradient(25deg, #d84b46, #c58578, #9cb3ae, #02dee7)
}
/* h1水平垂直居中 */
h1{ 
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: #fff;
}
.pos{
    width: 100%;
    position: absolute;
    bottom: 0;
}
ul{
    display: flex;
    justify-content: space-around;
    
}
ul li{
    list-style: none;
    border: solid 3px #fff;
    /* 隐藏初始图片的加载 */
    visibility: hidden;  
    
}
.circle li{
    width: 50px;
    height: 50px;
    animation: circle 10s linear infinite;
}


.circle li:nth-child(1){
    animation-delay: 2s;
}
.circle li:nth-child(2){
    animation-delay: 6s;
}
.circle li:nth-child(3){
    animation-delay: 0s;
}
.circle li:nth-child(4){
    animation-delay: 3s;
    background: #fff;
}
.circle li:nth-child(5){
    animation-delay: 7s;
}


@keyframes circle {
    from{
        opacity: 1;
        transform: translate(0) scale(0) rotate(0);
    }
    to{
        visibility: visible;
        transform: translateY(-90vh) scale(1) rotate(1000deg);
        border-radius: 50%;
        opacity: 0;
    }
}